﻿<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset="utf-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body{
            overflow:hidden;
        }
        .play{
            position:fixed;
            top:-150px;
            left:50%;
            transform:translate3d(-50%,0,0);
            z-index:1000;
            width:400px;
            height:150px;
            background-color:#fff;
            border-radius:15px;
            text-align:center;
            line-height:40px;
            transition:all 1s ease 1s;
        }
        .play img{
            position:absolute;
            top:25px;
            left:25px;
            width:100px;
            height:100px;
        }
        input[type=file]{
            cursor:pointer;
            z-index:1001;
            position:absolute ;
            top:100px;
            left:150px;
            width:225px;
            color:#888;
        }
        #title{
            position:absolute;
            top:25px;
            left:150px;
            width:225px;
            height:60px;
            border-bottom:1px solid #ccc;
            color:#888;
        }
    </style>
    <script>
        window.onload = function () {
            var HEIGHT = window.innerHeight, WIDTH = window.innerWidth;
            var canvas = document.getElementById("canvas"), audioInput = document.getElementById('uploadedFile');
            var ctx = canvas.getContext("2d");
            var mfile, mfileName;
            var audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)();
            window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
            
            function initCanvas() {
                canvas.height = HEIGHT;
                canvas.width = WIDTH;
                canvas.style.backgroundColor = "#000";
            }
            function loadPanel() {
                document.getElementById("panel").style.top = "150px";
            }
            function outPanel() {
                document.getElementById("panel").style.top = "-150px";
            }
            // 定义加载音频文件的函数
            //function loadSound(url) {
            //    var request = new XMLHttpRequest(); //建立一个请求
            //    request.open('GET', url, true); //配置好请求类型，文件路径等
            //    request.responseType = 'arraybuffer'; //配置数据返回类型
            //    // 一旦获取完成，对音频进行进一步操作，比如解码
            //    request.onload = function () {
            //        var arraybuffer = request.response;
            //        var audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)();
            //        audioContext.decodeAudioData(arraybuffer, function (buffer) { //解码成功则调用此函数，参数buffer为解码后得到的结果
            //            var audioBufferSouceNode = audioContext.createBufferSource();
            //            audioBufferSouceNode.connect(audioContext.destination);
            //            audioBufferSouceNode.buffer = buffer;
            //            audioBufferSouceNode.start(0);
            //        }, function (e) {
            //            console.log("文件解码失败:(");
            //        });
            //    }
            //    request.send();
            //}
            audioInput.onchange = function () {
                //这里判断一下文件长度可以确定用户是否真的选择了文件，如果点了取消则文件长度为0
                if (audioInput.files.length !== 0) {
                    mfile = audioInput.files[0]; //将文件赋值到Visualizer对象的属性上
                    mfileName = mfile.name;
					document.getElementById("title").innerHTML = "解码中……*_*";
                    start(); //获取到文件后，开始程序，这个方法会在后面定义并实现
                };
            }
            function start() {
                var fr = new FileReader();
                fr.onload = function (e) { //文件读取完后调用此函数
                    var fileResult = e.target.result; //这是读取成功得到的结果ArrayBuffer数据
                    audioContext.decodeAudioData(fileResult, function (buffer) { //解码成功则调用此函数，参数buffer为解码后得到的结果
                        var audioBufferSouceNode = audioContext.createBufferSource();
                        var analyser = audioContext.createAnalyser();
                        audioBufferSouceNode.connect(analyser);
                        analyser.connect(audioContext.destination);
                        audioBufferSouceNode.buffer = buffer;
                        audioBufferSouceNode.start(0);
                        draw(analyser);
						outPanel();
                    }, function (e) {
                        document.getElementById("title").innerHTML = "文件解码失败:(";
                    });
                };
                //将上一步获取的文件传递给FileReader从而将其读取为ArrayBuffer格式
                fr.readAsArrayBuffer(mfile);
            }
            function draw(analyser) {
                var cNum = 128;
                analyser.fftSize = cNum * 2;
                var Dots = [];
                function random(m, n) {
                    return Math.round(Math.random() * (n - m) + m);
                }
                function getDots() {
                    Dots = [];
                    for (var i = 0; i < cNum; i++) {
                        var x = random(0, canvas.width);
                        var y = random(0, canvas.height);
                        var color = "rgba(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + "," + random(0,10)/10 + ")";
                        Dots.push({
                            x: x,
                            y: y,
                            dy: random(0, 2),
                            color: color
                        });
                    }
                }
                getDots();
                var drawCircle = function () {
                    var array = new Uint8Array(analyser.frequencyBinCount);
                    analyser.getByteFrequencyData(array);
                    ctx.clearRect(0, 0, WIDTH, HEIGHT);
                    for (var i = 0; i < cNum; i++) {
					    ctx.beginPath();
                        
                        var o = Dots[i];
                        var r = array[i] / 256 * 30;
                        //o.y += o.dy;                        
                        if (o.x > canvas.width||o.y>canvas.height) {
                            o.y = 0;                            
                        }
                        else {                            
                            o.y = o.y;
                        }
						
                        ctx.arc(o.x, o.y, r, 0, Math.PI * 2, true);
                        var g = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, r);
                        g.addColorStop(0, "rgb(238,199,16)");
						//g.addColorStop(0,o.color);
						//g.addColorStop(0.1, "#fff");
						//g.addColorStop(0.2,o.color);
						//g.addColorStop(0.85,o.color);
						//g.addColorStop(0.9, "#fff");
                        g.addColorStop(0.95, o.color);
						g.addColorStop(1, "#fff");
                        ctx.fillStyle = g;
                        ctx.fill();
                        ctx.closePath();
                    }
                    requestAnimationFrame(drawCircle);                    
                }
                requestAnimationFrame(drawCircle);                
            }
            initCanvas();
            loadPanel();
        }
    </script>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="play panel" id="panel">
        <img src="src/logo.png" />
        <div id="title">请选择本地音乐！</div>
        <input type="file" id="uploadedFile" value="add"/>
    </div>
</body>
</html>
